﻿<!DOCTYPE html>
<html>
<head>
<!--
Hentet fra forelesningseksempel, og skrevet om til å bruke
Bootstrap og passe inn i vårapplikasjon.
-->

<!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Bootstrap -->
    <script src="includes/bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
    <link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Load the popup handling part of tinymce -->
	<script type="text/javascript" src="includes/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
<!-- The script file for the file handling system, 
     note this creates an object folders of the Folders class -->
<script src="includes/js/folders.js"></script>

<script type="text/javascript">
$(document).ready (function () {	// When the DOM is ready
	folders.folderSelected = folderSelected;	// Method to be called when a folder is selected
	folders.init ();							// Initialize the folders object
	folders.fileClick = fileClicked;			// Set the function to be called when a file is selected
	$('.DnD').get(0).ondrop = folders.upload;	// Set the function to be called when a file is dropped on the dialog
	$('.DnD').get(0).ondragenter = $('body').get(0).ondragover = function (e) {	// Need this to activate file drop functionality
		e.preventDefault();														// Do not use the default action
		e.dataTransfer.dropEffect = 'copy';										// Indicate with a plus sign
		return false;															// Another prevent the default indication
	}
});

function folderSelected (id) {		// What to do when a folder is selected, not used
	// alert ("Currently selected folder : "+id);
}

function newFolder () {				// Called when a new folder is to be created
	var folderName = prompt ("Navn på ny katalog");		// Get the name of the new folder
	if (folderName!=''&&folderName!=null)				// If a folder name was given
		folders.createNewFolder (folderName);			// Create the folder
}

function removeFolder () {			// Called when delete folder is called
	if (folders.current==-1) {		// If no folder is selected
		alert('Venligst velg en katalog'); // Give message to user
		return;						// Do nothing
	}
	if (confirm ("Vil du virkelig slette katalogen og alt innholdet?"))	// Ask the user for confirmation
		folders.removeFolder ();	// Then delete the folder
}

function renameFolder () {			// Called when rename of folder is called
	if (folders.current==-1) {		// If no folder is selected
		alert('Venligst velg en katalog'); // Give message to user
		return;						// Do nothing
	}
	var folderName = prompt ("Gi nytt navn til katalogen");	// Get the new name from the user
	if (folderName!=''&&folderName!=null)					// If a new name was given
		folders.renameFolder (folderName);					// Rename the folder
}

function newFile () {				// Called when the upload new file is called
	if (folders.current==-1) {		// If no folder is selected
		alert('Venligst velg en katalog'); // Give message to user
		return;						// Do nothing
	}
	$('#fileUpload .status').hide();	// Hide the status part of the file upload dialog
	$('#fileUpload form')[0].folderid.value = folders.current;	// Set the value of the hidden field for folder id
	$('#fileUpload').modal({show: true });					// Display the file upload dialog
}

function uploadFile () {				// User initiates a file upload
	$('#fileUpload .status').show();	// Display the file uploading status message
	return true;
}

function fileUploaded () {						// File upload has completed
	$('#fileUpload').modal({show: false });		// Hide the file upload dialog
	folders.showFiles();						// Redisplay the files (show the newly uploaded file
}

function fileClicked (id) {				// When a file is selected
	// alert ("Du klikket på "+id);
	FileBrowserDialogue.submit (id);	// Initiate the closedown of the dialog
}

function changeFileName () {			// Called when the user wants to rename a file
	if ($('#files input[type=checkbox]:checked')[0]!=null) {	// If a file is selected
		var fileName = prompt ("Gi nytt navn på filen");		// Ask for the new name
		if (fileName!=''&&fileName!=null)						// If a new name is given
			folders.renameFile ($('#files input[type=checkbox]:checked')[0].value, fileName);	// Rename the file
	}
	else {
		alert('Venligst velg en fil');							// If not, alert user
	}
}

function changeFileDescr () {			// Called when the user wants to change a file description
	if ($('#files input[type=checkbox]:checked')[0]!=null) {	// If a file is selected
		var fileDescr = prompt ("Ny beskrivelse på filen");		// Ask for the new description
		if (fileDescr!=''&&fileDescr!=null)						// If a description is given
			folders.changeFileDescr ($('#files input[type=checkbox]:checked')[0].value, fileDescr);	// Change the description
	}
	else {
		alert('Venligst velg en fil');							// If not, alert user
	}
}

function removeFile () {				// Called when the user wants to remove a file
	if ($('#files input[type=checkbox]:checked')[0]!=null) {	// If a file is selected
		if (confirm ("Vil du virkelig slette filen?"))			// Ask for confirmation
			folders.removeFile ($('#files input[type=checkbox]:checked')[0].value);		// File removal is confirmed, remove the file
	}
	else {
		alert('Venligst velg en fil');							// If not, alert user
	}
}

var FileBrowserDialogue = {				// Initialization data for the dialog, used by tineymce to initialize the dialog
  init : function () {					// Initialization code, we cheat and use document.ready
    // Here goes your code for setting your custom things onLoad.
  },
  submit : function (id) {				// Called when a user has selected a file, transfer the file to the tinymce dialog
	var URL = 'includes/functions/file.php?id='+id;		// Create the url needed to read the file
    var win = tinyMCEPopup.getWindowArg("window");	// Get the handle for the tinymce dialog

    // insert information now
    win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = URL;

    // are we an image browser
    if (typeof(win.ImageDialog) != "undefined") {
      // we are, so update image dimensions...
      if (win.ImageDialog.getImageData)
        win.ImageDialog.getImageData();

      // ... and preview if necessary
      if (win.ImageDialog.showPreviewImage)
        win.ImageDialog.showPreviewImage(URL);
    }

    // close popup window
    tinyMCEPopup.close();
  }
}

// This code is needed to create a tinymnce dialog
tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
</script>
<title>Katalogvisning</title>
<!-- Link the stylesheet for the top menu -->
<link rel="stylesheet" href="css/fileFolderOperations.css">

</head>
<body style="margin:0px; padding: 0px;" class="DnD">	<!-- The class="DnD" is used to target the DnD functionality -->
<div id="operations">	<!-- The top menu (file and folder operations) -->
	<ul class="nav nav-pills">
		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:return false;">Kataloger <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="javascript:newFolder();">Ny katalog</a></li>
				<li><a href="javascript:renameFolder();">Gi nytt navn</a></li>
				<li><hr/></li>
				<li><a href="javascript:removeFolder();">Slett katalog</a></li>
			</ul>
		</li>
		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:return false;">Filer <span class="caret"></span></a>
			<ul  class="dropdown-menu">
				<li><a href="javascript:newFile();">Last opp ny fil</a></li>
				<li><a href="javascript:changeFileName();">Endre filnavn</a></li>
				<li><a href="javascript:changeFileDescr();">Endre filbeskrivelse</a></li>
				<li><hr/></li>
				<li><a href="javascript:removeFile();">Slett fil</a></li>
			</ul>
		</li>
	</ul>
	<br clear="both"/>
</div>
<nobr><div id="folders">
</div><div id="files">
<div z-index="-1" class="heading"><span class="name">Navn</span><span class="date">Dato</span><span class="type">Type</span><span class="size">St&oslash;rrelse</span></div>
<div class="filelist"/>
</div>
</div>

<!-- DOM element to show progress of DnD file uploads -->
<div id="progressDiv">
	<p>Laster opp fil(er), vennligst vent....</p>
	<div id="progress" class="progress progress-striped active">
		<div class="progress-bar"  role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="">
		</div>
	</div>
</div>

<!-- Dialog for file upload -->

<div class="modal fade" id="fileUpload" tabindex="-1" role="dialog" aria-labelledby="Last opp fil" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Last opp fil</h4>
      </div>
      <div class="modal-body">
		<form id="uploadFile" method="post" onSubmit="javascript: return uploadFile();" target="upload_target" enctype="multipart/form-data" action="includes/functions/uploadFile.php" role="form">
			<input type="hidden" name="folderid" value="-1"> 
			<div id="divDescr" class="form-group">
				<label for="descr">Beskrivelse</label>
				<input type="text" class="form-control" name="descr" id="descr" title="En beskrivelse av filen"/><br/>
			</div>
			<div class="checkbox">
				<label for="public">Offentlig</label>
				<input type="checkbox" name="public" value="y" title="Har alle tilgang til filen?">
			</div>
			<div class="form-group">
				<label for="file">Velg fil</label>
				<input name="file" id="file" type="file" />
			</div>
		<div class="status" style="display:none">Vennligst vent, filen lastes opp</div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		<input form="uploadFile" type="submit" name="action" class="btn btn-primary" value="Last opp filen" /><br />
		<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
      </div>
    </div>
  </div>
</div>

</nobr>

</body>
</html>
















